JavaScript Hover Buttons

Browser Compatibility: NS3+, IE4+

Using a javascript to change an image when someone moves their mouse over it has become quite popular. I've heard it called many things: "hover buttons", "rollover", and "image highlighter" are a few. What happens is that we use two images, a link, and a javascript to make a clickable image link that is "highlighted" when a mouse passes over it.

To begin, you will need to make yourself two images of the same size, making whatever changes you would like to the second one. Below is an example where I chose to make an image with blue text and one in red text. The red-text image is what I want people to see when they move their mouse over the blue-text image.

OK, that is the easy part. Now we have to have a script that will do all the work for us. I'm going to go ahead and put the whole thing below, and explain the script in parts afterward. I got this script from a free script page, did some formatting for readability, changed some variable names, and added a check for IE4. The script will only work in Netscape 3 or 4 and IE 4. This would go between the HEAD tags of your HTML page:

<HEAD>
<SCRIPT language="JavaScript">

<!--hide

browserName=navigator.appName; 
browserVer=parseInt(navigator.appVersion);

  if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4))    
  version="n3";
  else
    version="n2";

  if (version=="n3")
   {
     pic1on= new Image(100,25);
     pic1on.src="shoes2.gif";  

     pic1off= new Image(100,25);
     pic1off.src="shoes1.gif";
   }

function lightup(imgName)
 {
   if (version=="n3")
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (version=="n3")
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->

</SCRIPT>
</HEAD>

Part 1: Browser Check

All right, the first step is to check for a browser that supports all the functions and declarations we will be using. This is done with the following lines:

browserName=navigator.appName;

This line is used to get the name of the browser.

browserVer=parseInt(navigator.appVersion);

This line checks for the version of the browser.


  if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4))    
  version="n3";
  else
    version="n2";

This is basically one long sentence that will define the variable "version" . In plain wording, it reads like this: "If the name of the browser is Netscape and the version is 3 or higher, or if the browser is Microsoft Internet Explorer and the version is 4 or higher, then the version is "n3". Otherwise, the version is "n2". So, the n3 version will run the script, and n2 version will only see the first image.

Part 2: Define and Load Your Images

Now, we get the images involved in the scheme here:

if (version=="n3")
{

This checks for an "n3" browser so "n2" browsers don't try running the script (error city!). The "{" opens the group of statements for "n3" browsers.

pic1on= new Image(100,25);

This defines a new image called "pic1on" with a width of 200 and a height of 25.

pic1on.src="shoes2.gif";

This gives the source, or url of the image. This allows it to load now so users don't wait for a new image to load when they pass their mouse over it later. Be sure this is the url of your 2^nd image. This is the one you want people to see when their mouse passes over.

pic1off= new Image(100,25);

Now you define your default, or 1^st image. pic1off.src="shoes1.gif";

Give the url of your default image so it is loaded.

} : Ends the image defining and loading statements.

Function 1: The mouseover Function

Now we get to the function that will be triggered by the mouse moving over the image:

function lightup(imgName)
{

This defines a function named "lightup". It is reading in a parameter called "imgName". "imgName" is going to be the name="pic1" attribute of the 2^nd image from our HTML document. It is sent to this function when we call it later in the HTML document (see below). imgName turns out to be "pic1". The "{" begins the group of statements for the function.

if (version=="n3")
{

Another browser check and beginning of statements for "n3" browsers.

imgOn=eval(imgName + "on.src"); This defines the variable "imgOn" as the sum of the variable "imgName" and the string "on.src". Remember, the function read in "imgName" as "pic1", so the sum ends up as "pic1on.src", which is defined earlier as the url of our 2^nd image.

document[imgName].src= imgOn;

Now, we define imgOn for the document, so it loads the correct image. By substituting what we got for imgOn a moment ago, and substituting "pic1" for imgName (which was sent to the function), we get this:

document[pic1].src=pic1on.src.

This is why we need to use the name="pic1" attribute in the image tag in our HTML later. This makes a reference to an image in the document by the name of "pic1". The new source (url) for the image is now the value of "pic1on.src", which we defined earlier as "shoes2.gif", our 2^nd image. A bit complicated at first, but it works out nicely, doesn't it?

} } : These end the "n3" statements and the fuction statements.

Function 2: When the Mouse Leaves the Image


function turnoff(imgName)
 {
   if (version=="n3")
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//---->

</SCRIPT>
</HEAD>

This function does the same thing as the last one, except that it occurs when the mouse moves off the image. Thus, I named the function "turnoff" since it turns the previous function "off" and returns to the 1^st image. After the function ends, the script and HEAD tags are closed.

Finally, the HTML!

Now, go down into your BODY section and find out where you would like your image to go. You will then put in the following linked image code. You should place everything on one line, I have it this way only for readability.

Notice how we call our function "lightup" with the parameter 'pic1' on the Mouseover. We then call the function "turnoff" with the parameter 'pic1' on the Mouseout. The action is all done in our link tag. You can link to any url you wish here, and that will be where the user goes if they click the image. In the image tag, use your first (default) image as the image source. Also, be sure you use the name="pic1" attribute, as well as defining your height and width. This will make sure the script knows the name, height, and width of your image and will run smoothly. The border attribute is up to you. I chose zero for mine because I wanted the image to look like text.

The Final Product: A Changing, Linked Image

Yes, there it is. Move your mouse over it and see the text turn red! You can click it if you want, but you'll end up back at the main JavaScript Page......

But I Want to do this for Multiple Images!

No problem. You can use it for as many images as you wish. Just be sure to define your other images along with your first. Remember, you need two images for every one you want to change. To add extras, define them first back in the script in the HEAD section:

  if (version=="n3")
   {
     pic1on= new Image(100,25);
     pic1on.src="/images/shoes2.gif";  
     pic2on= new Image(100,25);
     pic2on.src="/images/story2.gif"; 

     pic1off= new Image(100,25);
     pic1off.src="/images/shoes1.gif";
     pic2off= new Image(100,25);
     pic2off.src="/images/story1.gif"; 
   }

Now, be sure you name it correctly in the HTML in the BODY section. For the new image here, we will name it "pic2". (For more, just use "pic3", "pic4", and so on). Then just link it to another page:

Now you will have two changing images linking to different places!

Do this for as many image links as you wish.....it can add a nice impact to your page for those with newer browsers.

Well, that does it for now.......Let's go on to the next section, where you will see how to access form elements with JavaScript. So, the next section is: Beginning With Forms.